<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 上 -->
        <slot name="before">
          <el-form-item :label="nameOfStore" label-width="100px">
            <el-input v-model="storeName" :placeholder="nameOfStore" />
          </el-form-item>
        </slot>
        <!-- 中 -->
        <slot v-if="middle" name="middle">
          <el-form-item label="所属店铺" label-width="100px">
            <el-input
              v-model="formInline.storeNameOfGoods"
              placeholder="店铺名称"
            />
          </el-form-item>
        </slot>
        <!-- 下 -->
        <slot name="after">
          <el-form-item :label="categoryOfStore" label-width="100px">
            <el-select
              v-model="storeCategory"
              placeholder="请选择"
              @focus="getIndustry"
            >
              <el-option label="全部" value="全部" />
              <el-option
                v-for="item in formInline.category"
                :key="item.id"
                :label="
                  type === 'store' ? item.industryname : item.categoryName
                "
                :value="item.id"
              />
              <!-- <el-option label="区域二" value="beijing" /> -->
            </el-select>
            <i v-if="single" class="el-icon-minus" />
            <el-select
              v-if="single"
              v-model="storeCategoryDetail"
              placeholder="请选择"
              @focus="getSubCategory"
            >
              <el-option label="全部" value="全部" />
              <el-option
                v-for="item in formInline.categoryDetail"
                :key="item.id"
                :label="item.subName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </slot>
        <el-form-item style="margin-left: 40px">
          <el-button
            size="small"
            class="search"
            @click="searchResult"
          >查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getAllStoreListbyTag, getIndustry } from '@/api/storeserin'
import {
  getGoodCategorys,
  getSubGoodCategorys,
  getAllGoodListByTag
} from '@/api/goodserin'
import { tidyTotal } from '@/filters'
import { storeNameForId } from '@/filters/storeerin'

export default {
  name: 'SearchHeader',
  components: {},
  props: {
    middle: {
      type: Boolean,
      default: true
    },
    single: {
      type: Boolean,
      default: true
    },
    nameOfStore: {
      type: String,
      default: '店铺编号/名称'
    },
    categoryOfStore: {
      type: String,
      default: '行业'
    },
    // 请求多少个数据的限制
    limit: {
      type: Number,
      required: true
    },
    // 接受一个类型， 看是那个组件在用这个组件
    type: {
      type: String,
      default: ''
    },
    currentStoreId: {
      type: [String, Object, Number],
      default: ''
    }
  },
  data() {
    return {
      formInline: {
        storeName: '', // 店铺名称 商品名称
        category: [], // 行业一级类别  商品一级类别
        categoryDetail: [], // 行业二级分类 商品二级类别
        storeNameOfGoods: '' // 中间插槽的所属店铺
      },
      storeName: '', // 当前的店铺或者商品的名称
      storeCategory: '', // 当前一级选中的值
      storeCategoryDetail: '', // 当前二级选中的值
      isClickSearch: false, // 设置一个值，来通知父组件，此时是查询的状态吗？
      oldStoreName: '', // 用来设置改变了查询数据但是么有点击查询按钮时候的值 店铺名称 商品名称
      oldStoreCategory: '', // 行业一级类别  商品一级类别
      oldSubStoreCategory: '', //   商品二级类别
      oldStoreNameOfGoods: '' // // 中间插槽的所属店铺原来的值
    }
  },
  computed: {},
  watch: {
    currentStoreId: {
      handler() {
        if (this.currentStoreId) {
          console.log(121212)
          this.formInline.storeNameOfGoods = storeNameForId(this.currentStoreId)
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 根据关键信息查找数据
    async searchResult() {
      // 不同type组件中，判断为空的个数不一致
      // 由于jsonp-serve没办法组合查询一个填值，一个不填值，所以只能进行分情况处理
      const isEmpty =
        this.type === 'store'
          ? !this.storeName.trim().length && !this.storeCategory
          : !this.storeName.trim().length &&
            !this.storeCategory &&
            !this.storeCategoryDetail &&
            !this.formInline.storeNameOfGoods.trim().length

      if (isEmpty) {
        this.$message.warning('请先输入内容，再查询')
      } else {
        // 当点击查询之后，无论怎么切换数据，只要没有再次点击查询，总院都是原来的那个值，这样保证传过去的计算属性不变
        if (this.type === 'good') {
          this.oldStoreNameOfGoods = this.formInline.storeNameOfGoods
          this.oldSubStoreCategory = this.storeCategoryDetail
        }
        this.oldStoreName = this.storeName
        this.oldStoreCategory = this.storeCategory
        // 设置一个值，告诉父组件我此时是查询的结果，所有数据按照查询的来
        this.isClickSearch = true
        // 如果分类选择全部， 就需要重新赋值
        let storeCategory = this.storeCategory
        let subStoreCategory = this.storeCategoryDetail
        if (this.storeCategory === '全部' || !this.storeCategory) {
          storeCategory = undefined
        }
        if (this.storeCategoryDetail === '全部' || !this.storeCategoryDetail) {
          subStoreCategory = undefined
        }
        // 进行模糊查询
        let data = []
        let total = []
        if (this.type === 'store') {
          // 1、当输入框中的内容 为店铺编号时 2、 当输入框中的内容 为店铺名称时 都需要获取数据，然后合并
          // 查询总条数，传给父组件，供分页使用
          const count1 = await getAllStoreListbyTag({
            storeName_like: this.storeName,
            storeIndustryErinId: storeCategory
          })
          const count2 = await getAllStoreListbyTag({
            storeNum_like: this.storeName,
            storeIndustryErinId: storeCategory
          })
          const count3 = await getAllStoreListbyTag({
            subStoreName_like: this.storeName,
            storeIndustryErinId: storeCategory
          })
          const count = [count2, count1, count3]
          total = tidyTotal(count)
          data = total.slice(0, this.limit)
        } else {
          // 查询总条数，传给父组件，供分页使用
          const count1 = await getAllGoodListByTag({
            goodName_like: this.storeName,
            storeName_like: this.formInline.storeNameOfGoods,
            goodCategoryId: storeCategory,
            subGoodCategoryId: subStoreCategory
          })
          const count2 = await getAllGoodListByTag({
            goodNum_like: this.storeName,
            storeName_like: this.formInline.storeNameOfGoods,
            goodCategoryId: storeCategory,
            subGoodCategoryId: subStoreCategory
          })
          const count = [count2, count1]
          total = tidyTotal(count)
          data = total.slice(0, this.limit)
        }

        if (!data || data.length === 0) {
          this.isClickSearch = false
          this.$message.warning('没有相关的数据')
          return
        }
        this.$message.success('查询成功')
        // 将获取的数据传给父组件
        this.$emit('getResultByTag', data, total)
      }
    },
    // 获取行业信息
    async getIndustry() {
      let res = []

      if (this.type === 'store') {
        res = await getIndustry()
      } else {
        res = await getGoodCategorys()
      }
      this.formInline.category = res
    },
    // 获取二级分类信息
    async getSubCategory() {
      // 当一级分类为全部时， 二级分类展示所有

      let goodCategoryId = this.storeCategory
      if (this.storeCategory === '全部' || !this.storeCategory) {
        goodCategoryId = undefined
      }
      this.formInline.categoryDetail = await getSubGoodCategorys({
        goodCategoryId
      })
    },
    // 重置
    reset() {
      this.isClickSearch = false
      this.storeName = ''
      this.storeCategory = ''
      this.storeCategoryDetail = ''
      this.formInline.storeNameOfGoods = ''
      this.$emit('resetResult')
    }
  }
}
</script>

<style scoped lang="scss">
.search {
  background-color: #f90;
  color: #fff;
}
// 重写element-ui样式
.el-card {
  margin: 10px 20px 0;
}

::v-deep .el-form {
  .el-form-item {
    margin-bottom: 5px;
    .el-form-item__label {
      color: #515a6e;
      font-weight: normal;
      font-size: 13px;
      line-height: 32px;
    }
    .el-form-item__content {
      line-height: 32px;
      .el-input__inner {
        font-size: 13px;
        line-height: 32px;
        height: 32px;
      }
    }
  }
}
</style>
